﻿$(window).load(function () { $(".loading").fadeOut() })
$(function () {

    echarts_2()
    echarts_3()
    echarts_4()
    echarts_5()
    echarts_6()

    function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {
                textStyle: { //图例文字的样式
                    color: '#fff',
                },
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    color: '#FFFFFF'
                },
                splitLine: { //网格线
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#0087ED',
                        width: 1,//这里是为了突出显示加上的
                    }
                },
            },
            yAxis: {
                type: 'category',
                data: ['巴南区', '渝中区', '万州区', '丰都县', '奉节县', '潼南区', '江津区', '大足区', '忠县', '开州区', '垫江区'],
                axisLabel: {
                    color: '#FFFFFF',
                },
                axisLine: {
                    lineStyle: {
                        color: '#0087ED',
                        width: 1,//这里是为了突出显示加上的
                    }
                },
                splitLine: { //网格线
                    show: false
                }
            },
            series: [
                {
                  name: '合作社',
                  type: 'bar',
                  stack: 'total',
                  label: {
                    show: true
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [320, 302, 301, 334, 390, 330, 320, 300, 250, 310, 370].sort((a, b) => a - b),
                  barWidth: '70%',
                  itemStyle: {
                    emphasis: {
                      barBorderRadius: 7
                    },
                    normal: {
                      barBorderRadius: [20, 0, 0, 20]
                    }
                  },
                },
                {
                  name: '家庭农场',
                  type: 'bar',
                  stack: 'total',
                  label: {
                    show: true
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [120, 132, 101, 134, 90, 230, 210, 150, 200, 89, 155].sort((a, b) => a - b),
                  itemStyle: {
                    emphasis: {
                      barBorderRadius: 7
                    },
                    normal: {
                      barBorderRadius: [0, 0, 0, 0]
                    }
                  },
                },
                {
                  name: '涉农企业',
                  type: 'bar',
                  stack: 'total',
                  label: {
                    show: true
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [220, 182, 191, 234, 290, 330, 310, 200, 150, 300, 120].sort((a, b) => a - b),
                  itemStyle: {
                    emphasis: {
                      barBorderRadius: 7
                    },
                    normal: {
                      barBorderRadius: [0, 20, 20, 0]
                    }
                  },
                }
              ]          
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart3'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#dddc6b'
                    }
                }
            },
            legend: {
                textStyle: { //图例文字的样式
                    color: '#fff',
                },
                right: '2%',
            },
            grid: {
                left: '10',
                top: '20',
                right: '30',
                bottom: '10',
                containLabel: true
            },

            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 14,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }

                },

                data: ['2012年', '2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年']

            }, {

                axisPointer: { show: false },
                axisLine: { show: false },
                position: 'bottom',
                offset: 20,



            }],

            yAxis: [{
                type: 'value',
                axisTick: { show: false },
                splitNumber: 4,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 16,
                    },
                },

                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)',
                        type: 'dotted',
                    }
                }
            }],
            series: [
    {
        name: '合作社',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                color: 'rgba(31, 174, 234, 1)',
                width: 2
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(31, 174, 234, 0.4)'
                }, {
                    offset: 0.8,
                    color: 'rgba(31, 174, 234, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
        },
        itemStyle: {
            normal: {
                color: '#1f7eea',
                borderColor: 'rgba(31, 174, 234, .1)',
                borderWidth: 5
            }
        },
        data: [3, 6,9, 10, 15, 17, 19, 30, 32, 36, 50, 55, 59, 60]
    },
    {
        name: '家庭农场',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                color: 'rgba(159,230,184, 1)',
                width: 2
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(159,230,184, 0.4)'
                }, {
                    offset: 0.8,
                    color: 'rgba(159,230,184, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
        },
        itemStyle: {
            normal: {
                color: '#9FE6B8',
                borderColor: 'rgba(159,230,184, .1)',
                borderWidth: 5
            }
        },
        data: [4,5,12,20,22,23,28,35,38,49,50,55]
    },
    {
        name: '涉农企业',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                color: 'rgba(225,219,92, 1)',
                width: 2
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(225,219,92, 0.4)'
                }, {
                    offset: 0.8,
                    color: 'rgba(225,219,92, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
        },
        itemStyle: {
            normal: {
                color: '#FFDB5C',
                borderColor: 'rgba(225,219,92, .1)',
                borderWidth: 5
            }
        },
        data: [2,5,10,13,14,16,21,22,35,36,42,67]
    }
]


        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));
        var option = {

            grid: {
                left: '0',
                top: '30',
                right: '0',
                bottom: '10',
                containLabel: true
            },
            legend: {

                top: 0,

                textStyle: {

                    color: "#fff",

                },

                itemWidth: 10,  // 设置宽度

                itemHeight: 10, // 设置高度

            },

            tooltip: {

                trigger: 'axis',

                axisPointer: { // 坐标轴指示器，坐标轴触发有效

                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

                }

            },

            xAxis: {

                type: 'category',

                data: ["农林牧渔业", "制造业", "科技服务业",],

                axisTick: { //---坐标轴 刻度

                    show: true, //---是否显示

                },

                axisLine: { //---坐标轴 轴线

                    show: true, //---是否显示

                    lineStyle: {

                        color: 'rgba(255,255,255,.1)',

                        width: 1,

                        type: 'dotted',

                    },

                },

                axisLabel: {//X轴文字

                    textStyle: {

                        fontSize: 12,

                        color: '#fff'

                    },

                },

            },

            yAxis: {

                type: 'value',

                splitLine: {//分割线

                    show: true,

                    lineStyle: {
                        color: 'rgba(255,255,255,.1)',

                        width: 1,
                        type: 'dotted'

                    }

                },

                axisLabel: {//Y轴刻度值

                    formatter: '{value}',

                    textStyle: {

                        fontSize: 12,

                        color: '#fff'

                    },

                },

                axisLine: { //---坐标轴 轴线

                    show: false, //---是否显示

                },

            },

            series: [
    {
        name: '合作社',
        type: 'bar',
        data: [3, 7, 4],
        barWidth: 15,
        barGap: 0.6, //柱子之间间距 //柱图宽度      两种情况都要设置，设置series 中对应数据柱形的itemStyle属性下的emphasis和normal的barBorderRadius属性初始化时候圆角  鼠标移上去圆角
        itemStyle: {
            normal: {
                barBorderRadius: 50,
                color: "#446ACF",
            }
        },
    },
    {
        name: '家庭农场',
        type: 'bar',
        data: [6, 2, 5],
        barWidth: 15, //柱图宽度
        itemStyle: {
            normal: { //设置颜色的渐变
                barBorderRadius: 50,
                color: "#4fb69d",
            }
        },
    },
    {
        name: '涉农企业',
        type: 'bar',
        data: [8, 4, 6],
        barWidth: 15, //柱图宽度
        itemStyle: {
            normal: { //设置颜色的渐变
                barBorderRadius: 50,
                color: "#ffa500",
            }
        },
    },
    {
        name: '涉农上市公司',
        type: 'bar',
        data: [5, 7, 3],
        barWidth: 15, //柱图宽度
        itemStyle: {
            normal: { //设置颜色的渐变
                barBorderRadius: 50,
                color: "#8b4513",
            }
        },
    }
]


        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));
        option = {
            legend: {
                orient: 'vertical',
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: 'rgba(255,255,255,.5)'
                },
                top: '20%',
                right: 30,
                data: ['未上市', '已上市', '已退市', '已死亡']
            },
            color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },

            calculable: true,
            series: [
                {

                    type: 'pie',
                    radius: [20, 70],
                    center: ["35%", "50%"],
                    roseType: 'area',
                    data: [
                        { value: 300, name: '未上市' },
                        { value: 200, name: '已上市' },
                        { value: 205, name: '已退市' },
                        { value: 180, name: '已死亡' },

                    ],
                    label: {
                        normal: {
                            formatter: function (param) {
                                return param.name + ':\n' + param.value + '\n';
                            }

                        }
                    },
                    labelLine: {
                        normal: {
                            length: 5,
                            length2: 15,
                            lineStyle: { width: 1 }
                        }
                    },

                    itemStyle: {
                        normal: {
                            shadowBlur: 30,
                            shadowColor: 'rgba(0, 0, 0, 0.4)'
                        }

                    },
                }
            ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
    function echarts_6() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart6'));
        option = {

            tooltip: {
                trigger: 'axis'
            },
            radar: [{
                indicator: [{
                    text: '企业数量',
                    max: 100
                }, {
                    text: '分支机构',
                    max: 100
                }, {
                    text: '对外投资',
                    max: 100
                }, {
                    text: '专利数量',
                    max: 100
                }, {
                    text: '利润总额',
                    max: 100
                }],
                textStyle: {
                    color: 'red'
                },
                center: ['50%', '50%'],
                radius: '70%',
                startAngle: 90,
                splitNumber: 4,
                shape: 'circle',

                name: {
                    padding: -5,
                    formatter: '{value}',
                    textStyle: {

                        color: 'rgba(255,255,255,.5)'
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: 'rgba(255,255,255,.05)'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.05)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.05)'
                    }
                }
            },],
            series: [{
                name: '雷达图',
                type: 'radar',
                tooltip: {
                    trigger: 'item'
                },
                data: [{
                    name: '全国平均值',
                    value: [40, 20, 30, 90, 80],
                    lineStyle: {
                        normal: {
                            color: '#03b48e',
                            width: 2,
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#03b48e',
                            opacity: .4
                        }
                    },
                    symbolSize: 0,

                }, {
                    name: '重庆地区',
                    value: [50, 40, 75, 80, 70],
                    symbolSize: 0,
                    lineStyle: {
                        normal: {
                            color: '#3893e5',
                            width: 2,
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: 'rgba(19, 173, 255, 0.5)'
                        }
                    }
                }]
            },]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
})


















